<template>
  <div id="maindata" style="width: 100%; height: 750px; float: left"></div>
</template>

<script>
import * as echarts from "echarts";
// import { getselectThreeArray } from "@/api/system/emporty";
// require("echarts/theme/macarons");
// import resize from "@/views/dashboard/mixins/resize";
export default {
  name: "housestati",
  // mixins: [resize],
  data() {
    return {
      myChart3: "",
      dormlist: [],
      bedkx: [],
      bedsum: [],
      data: [],
      rooms: [],
    };
  },
  created() {
    // this.threeArrayList();
  },
  mounted() {
    // window.addEventListener("resize", this.handleResize);
    window.addEventListener("resize", () => {
      if (this.myChart3) {
        this.myChart3.resize();
      }
    });
  },
  beforeDestroy() {
    if (!this.myChart3) {
      return;
    }
    this.myChart3.dispose();
    this.myChart3 = null;
  },
  destroyed() {
    window.removeEventListener("resize", () => {
      this.myChart3.resize();
    });
  },
  methods: {
    // handleResize() {
    //   this.myChart3.resize();
    // },
    // threeArrayList() {
    //   getselectThreeArray().then((res) => {
    //     console.log(res);
    //     this.dormlist = res.data.data;
    //     const { bedkx, bedsum, data, rooms } = res.data;
    //     this.bedkx = bedkx;
    //     this.bedsum = bedsum;
    //     this.data = data;
    //     this.rooms = rooms;
    //     this.$nextTick(() => {
    //       this.drawLine();
    //     });
    //   });
    // },
    drawLine() {
      this.myChart3 = echarts.init(document.getElementById("maindata"));
      this.myChart3.setOption({
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
        },
        color: ["#fec05a", "#4dc0e9", "#ffc657", "#5198ee"],
        legend: {
          data: this.data,
          textStyle: {
            color: "#333",
            fontSize: 14,
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          type: "value",
          axisTick: {
            show: true,
            interval: "auto",
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: "#c5c5c5",
            },
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: "#333",
              fontSize: 14,
            },
          },
        },
        yAxis: {
          type: "category",
          data: this.rooms,
        },
        series: [
          {
            name: "剩余床位",
            type: "bar",
            stack: "总量",
            label: {
              show: true,
              // position: "insideRight",
              position: "right",
              color: "#000",
              textStyle: {
                fontSize: 10,
              },
            },
            data: this.bedkx,
          },
          {
            name: "总床位数",
            type: "bar",
            stack: "总量",
            label: {
              show: true,
              position: "insideRight",
              textStyle: {
                fontSize: 10,
              },
              // position: "right",
            },
            data: this.bedsum,
          },
        ],
      });
      // window.onresize = () => {
      //   this.myChart3.resize();
      // };
    },
  },
};
</script>
<style scoped>
</style>
